<template>
  <div class="budateBox_center">
    <div class="update_navbas">
      <!-- 导航栏 -->
      <div class="title">{{ title }}</div>
      <!-- <el-tabs v-model="activeName" @tab-click="handleClick" v-show="tabs">
        <el-tab-pane label="Nowadays" name="nowadays"></el-tab-pane>
        <el-tab-pane label="Yesterday" name="yesterday"></el-tab-pane>
        <el-tab-pane label="Monday" name="monday"></el-tab-pane>
        <el-tab-pane label="Sunday" name="sunday"></el-tab-pane>
        <el-tab-pane label="Saturday" name="saturday"></el-tab-pane>
        <el-tab-pane label="Friday" name="friday"></el-tab-pane>
        <el-tab-pane label="Thursday" name="thursday"></el-tab-pane>
      </el-tabs> -->
      <!-- 编辑 -->
      <div
        class="edit cursor"
        v-show="edit && isShowdeldte"
        @click="isShowdeldte = false"
      >
        <i class="el-icon-edit-outline"></i> Edit
      </div>
      <!-- 编辑内容 删除书籍 -->
      <div class="deleteBox cursor" v-show="!isShowdeldte">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >select all</el-checkbox
        >
        <div class="delete" @click="isShowdeldte = true">Delete</div>
        <div class="delete carryout" @click="deleteFn()">Carry Out</div>
      </div>
    </div>

    <!-- 内容 -->
    <div class="updateHear">
      <div
        class="updatebook cursor"
        v-for="item in updataArr"
        :key="item.book"
        @click="checkFn(item)"
      >
        <div class="imgmotai">
          <img :src="item.photo" alt="" />
          <!-- 遮罩层  多选显示 -->
          <div class="motai" v-show="!isShowdeldte" @click.stop>
            <el-checkbox-group
              v-model="checkedCities"
              @change="handleCheckedCitiesChange"
            >
              <el-checkbox :label="item.book"></el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
        <div class="bookname">{{ item.book_name }}</div>
        <div class="newest" v-if="$route.path == '/update'">
          {{ item.catalogue_title }}
        </div>
        <div class="newest" v-if="$route.path == '/following'">
          Update to chapter {{ item.catalogue_count }}
        </div>
        <div class="newest" v-if="$route.path == '/history'">
          {{ item.classify_name }}
        </div>
        <!-- <el-progress
          :percentage="50"
          color="hsla(16, 96%, 61%, 1)"
          v-show="progress && isShowdeldte"
          >Read</el-progress
        > -->
      </div>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :hide-on-single-page="true"
        :current-page.sync="currentPage3"
        :page-size="12"
        layout="prev, pager, next, jumper"
        :total="conutNum"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { BookshelfsremoveApi } from "../../requery/api";
export default {
  // title 标题 tabs 显示导航栏 edit 显示编辑按钮 progress 进度条  conutNum 总条数
  props: ["title", "tabs", "edit", "progress", "updataArr", "conutNum"],
  data() {
    return {
      // activeName: "nowadays", //导航name
      isShowdeldte: true, //显示编辑还是编辑按钮  false显示编辑页面 true显示编辑按钮
      checkAll: false, //全选
      checkedCities: [], //选中
      isIndeterminate: true, //显示编辑中的页面
      cityOptions: [], //全部数组
      allquanxuan:'',
      currentPage3: 1,
      page: 1,
    };
  },
  methods: {
    // 点击分页
    handleSizeChange(val) {
      if (this.$route.path == "/following") {
        this.$emit("handleSizeChange", val);
      } else {
        this.$emit("handleSizeChange", val);
      }
    },
    handleCurrentChange(val) {
      if (this.$route.path == "/following") {
        this.$emit("handleSizeChange", val);
      } else {
        this.$emit("handleSizeChange", val);
      }
    },
    // 删除书籍
    deleteFn() {
      this.isShowdeldte = true;
      // 判断是否是history 本地删除
      if (this.$route.path == "/history") {
        if(this.allquanxuan){
          console.log(1);
          this.updataArr = []
          localStorage.removeItem("searchHistory")
          return
        }
        // 全部数组
        for(let i = 0;i<= this.updataArr.length - 1;i++){
          // 选中数组
          for(let j = 0 ; j <= this.checkedCities.length - 1;j++){
            if(this.updataArr[i].book == this.checkedCities[j]){
              this.updataArr.splice(i,1)
            }
          }
        }
        localStorage.setItem("searchHistory", JSON.stringify(this.updataArr));
        return
      }
      // 拼接字符串 数组 变成 '1,32,320' 的形式
      let b = this.checkedCities.join();
      console.log(b, "bbb");
      BookshelfsremoveApi({
        ids: b,
      }).then((res) => {
        if (res.code == 200) {
          console.log(1);
          this.$router.go(0);
        }
      });
    },
    // 点击跳转
    checkFn(item) {
      if (this.$route.path == "/update") {
        this.$router.push({ path: "/bookdetails", query: { id: item.id } });
      } else if(this.$route.path == "/following") {
        this.$router.push({ path: "/bookdetails", query: { id: item.book } });
      }else{
        this.$router.push({ path: "/reader", query: { id: item.bookid,  bookid: item.book } });
      }
    },
    qwe() {
      this.isShowdeldte = true;
    },
    handleClick(tab, event) {
      //   console.log(this.activeName);
      // this.$router.push(`/${this.activeName}`);
    },
    // 全选
    handleCheckAllChange(val) {
      this.allquanxuan = val
      console.log(val, "quanxuan");
      this.checkedCities = val ? this.cityOptions : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      console.log(value, "dianji");
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.updataArr.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.updataArr.length;
    },
  },
  created() {
    if (this.$route.path == "/history") {
      if(this.updataArr == null) return
      this.updataArr.map((item) => {
        console.log(item);
        this.cityOptions.push(item.book);
      });
    }
  },
  watch: {
    // 监听全部数据
    updataArr(newValue) {
      newValue.map((item) => {
        this.cityOptions.push(item.book);
      });
    },
  },
};
</script>
 
<style lang = "less" scoped>
/deep/.el-checkbox-group .el-checkbox__inner {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}
/deep/.el-checkbox-group .el-checkbox__inner::after {
  width: 5px;
  top: 3px;
  left: 8px;
  height: 10px;
}
/deep/.el-checkbox-group .el-checkbox__label {
  width: 0;
  height: 0;
  font-size: 0;
}
.pagination {
  width: 1160px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}
.budateBox_center {
  width: 1160px;
  height: 860px;
  margin: 0 auto;
  padding-top: 45px;
  box-sizing: border-box;
  .update_navbas {
    width: 100%;
    height: 41px;
    font-weight: 500;
    display: flex;
    align-items: center;
    /deep/.el-tabs {
      margin-left: 58px;
      color: #fff;
    }
    /deep/.el-tabs__header {
      margin: 0;
    }
    /deep/.el-tabs__item {
      color: #333333;
    }
    /deep/.el-tabs__item.is-active {
      color: #fb6e3b !important;
      opacity: 1 !important;
    }
    /deep/.el-tabs__nav-wrap::after {
      background-color: #fff;
    }
    /deep/.el-tabs__active-bar {
      /* margin: 0 auto !important;
        width: 20px !important; */
      background-color: #fb6e3b !important;
      opacity: 1 !important;
    }
    .title {
      font-size: 26px;
      font-weight: 650;
      color: #333333;
    }
    .edit {
      margin-left: 900px;
      font-size: 16px;
      color: #5486e5;
    }
    .deleteBox {
      display: flex;
      align-items: center;
      .el-checkbox {
        margin-left: 680px;
        margin-right: 24px;
      }
      .delete {
        width: 80px;
        height: 26px;
        font-size: 12px;
        border: 1px solid #bcbcbc;
        text-align: center;
        line-height: 26px;
        color: #999999;
      }
      .carryout {
        color: #ffffff;
        background: #5486e5;
        margin-left: 6px;
      }
    }
  }
  .updateHear {
    display: flex;
    flex-wrap: wrap;
    margin-top: 40px;
    width: 1160px;
    position: relative;
    .updatebook:nth-child(6n) {
      margin-right: 0;
    }
    .updatebook {
      width: 175px;
      font-weight: 500;
      margin-bottom: 28px;
      margin-right: 21px;
      .el-progress {
        margin-top: 10px;
      }
      .imgmotai {
        position: relative;
        height: 235px;
        .el-checkbox-group {
          margin-left: 20px;
          margin-top: 20px;
        }
        .motai {
          background: rgba(0, 0, 0, 0.5);
          border-radius: 4px;
          width: 175px;
          height: 235px;
          position: absolute;
          left: 0;
        }
        img {
          position: absolute;
          width: 175px;
          height: 235px;
          border-radius: 4px;
        }
      }

      .bookname {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 15px;
        color: #333333;
        margin: 13px 0 13px;
      }
      .newest {
        font-size: 14px;
        color: #999999;
      }
    }
  }
}
</style>